<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="img/logo_mini.png" type="image/x-icon" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Главная</title>
  </head>

  <body>
    <!-- Меню -->
    <div class="menu" style="background-image: url(img/background.jpg)">
      <div class="container">
        <div class="row">
          <div class="logo">
            <a href="index.html">
              <img src="img/logo.png" alt="логотип" />
            </a>
          </div>
          <ul>
            <li><a href="index.html">Главная</a></li>
            <li><a href="catalog.html">Каталог</a></li>
            <li><a href="man.html">Мужское</a></li>
            <li><a href="woman.html">Женское</a></li>
            <li><a href="contacts.html">Контакты</a></li>
          </ul>
          <div class="phone">
            <a href="tel:+78005353555">&#9742; +7 (800) 535-35-55</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Шапка -->
    <div class="header" style="background-image: url(img/header.png)">
      <div class="container">
        <div class="row">
          <div class="col-6 col-lg-12">
            <div class="header-inner">
              <div class="header-catalog">
                <h2>Каталог</h2>
                <div class="doors">
                  <div class="door">
                    <a href="#"
                      ><img src="img/nike.png" width="150px" alt=""
                    /></a>
                  </div>
                  <div class="door">
                    <a href="#"
                      ><img src="img/reebok.png" width="150px" alt=""
                    /></a>
                  </div>
                </div>
                <div class="doors">
                  <div class="door">
                    <a href="#"
                      ><img src="img/new_balance.svg" width="150px" alt=""
                    /></a>
                  </div>
                  <div class="door">
                    <a href="#"
                      ><img src="img/adidas.png" width="150px" alt=""
                    /></a>
                  </div>
                </div>
                <a class="btn" href="catalog.html">Смотреть</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Преимущества  -->
    <div
      class="advantages"
      style="background-image: url(img/bg-advantages.png)"
    >
      <div class="container">
        <h2>НАШИ ПРЕИМУЩЕСТВА</h2>
      </div>
    </div>
    <div
      class="advantages-cards"
      style="background-image: url(img/background.jpg)"
    >
      <div class="container">
        <div class="row advantages-cards-inner">
          <div class="col-4 col-lg-6 col-sm-12 advantages-card">
            <img src="img/icons/like.png" alt="" />
            <h3>СТИЛЬНЫЙ ВНЕШНИЙ ВИД</h3>
            <p>
              <b>Vibe Style</b> предлагает самые актуальные модели, следит за
              последними тенденциями моды и предлагает стильные и современные
              варианты обуви для всех возрастных категорий.
            </p>
          </div>
          <div class="col-4 col-lg-6 col-sm-12 advantages-card">
            <img src="img/icons/quality.png" alt="" />
            <h3>УДОБСТВО И КОМФОРТ</h3>
            <p>
              Важное преимущество <b>Vibe Style</b> - возможность примерить и
              оценить все модели обуви перед покупкой. Это обеспечивает удобство
              и комфорт при выборе, позволяет убедиться в правильности размера и
              качества выполнения.
            </p>
          </div>
          <div class="col-4 col-lg-6 col-sm-12 advantages-card">
            <img src="img/icons/list.png" alt="" />
            <h3>АССОРТИМЕНТ</h3>
            <p>
              <b>Vibe Style</b> предлагает огромный выбор различных моделей и
              брендов обуви, что позволяет удовлетворить потребности самых
              разных покупателей.
            </p>
          </div>
          <div class="col-4 col-lg-6 col-sm-12 advantages-card">
            <img src="img/icons/needle.png" alt="" />
            <h3>КАЧЕСТВО ПОШИВА</h3>
            <p>
              <b>Vibe Style</b> гарантирует высокое качество и долговечность
              продаваемой обуви. Это позволяет покупателям быть уверенными в
              том, что они получают продукт, который будет им служить долгое
              время.
            </p>
          </div>
          <div class="col-4 col-lg-6 col-sm-12 advantages-card">
            <img src="img/icons/tag.png" alt="" />
            <h3>ЦЕНЫ И СКИДКИ</h3>
            <p>
              <b>Vibe Style</b> предлагает регулярные привлекательные акции и
              скидки на различные товары. Это позволяет покупателям получить
              хорошую обувь по более доступной цене, привлекает новых клиентов и
              поддерживает постоянных покупателей.
            </p>
          </div>
          <div class="col-4 col-lg-6 col-sm-12 advantages-card">
            <img src="img/icons/handshake.png" alt="" />
            <h3>КЛИЕНТАМ</h3>
            <p>
              <b>Vibe Style</b> ориентирован на высокий уровень обслуживания
              клиентов. Квалифицированный персонал всегда готов помочь в выборе
              и подобрать оптимальный вариант обуви для каждого клиента, что
              создает приятную и доверительную атмосферу покупки.
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- О нас -->
    <div class="about" style="background-image: url(img/bg-about.jpg)">
      <div class="container">
        <div class="row about-inner">
          <div class="col-6 col-lg-12">
            <h2>
              VIBE STYLE – ЭТО ВЫСОКОКАЧЕСТВЕННЫЙ ПРОДУКТ
              <span>ОТ ПРОИЗВОДИТЕЛЯ.</span>
            </h2>
            <p></p>
          </div>
          <div class="col-6 col-lg-12 text-center">
            <a href="catalog.html" class="btn">Перейти в каталог</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Популярные товары -->
    <div class="popular" style="background-image: url(img/background.jpg)">
      <div class="container">
        <div class="row popular-title">
          <h2>ПОПУЛЯРНЫЕ ТОВАРЫ</h2>
        </div>
        <div class="row popular-goods">
          <div class="col-3 col-lg-6 col-sm-12 product">
            <img src="img/сatalog/test.jpg" alt="Название" />
            <h3>Название</h3>
            <div>20000 &#8381;</div>
            <a href="door.html" class="btn">Подробнее</a>
          </div>
          <div class="col-3 col-lg-6 col-sm-12 product">
            <img src="img/сatalog/test.jpg" alt="Название" />
            <h3>Название</h3>
            <div>20000 &#8381;</div>
            <a href="door.html" class="btn">Подробнее</a>
          </div>
          <div class="col-3 col-lg-6 col-sm-12 product">
            <img src="img/сatalog/test.jpg" alt="Название" />
            <h3>Название</h3>
            <div>20000 &#8381;</div>
            <a href="door.html" class="btn">Подробнее</a>
          </div>
          <div class="col-3 col-lg-6 col-sm-12 product">
            <img src="img/сatalog/test.jpg" alt="Название" />
            <h3>Название</h3>
            <div>20000 &#8381;</div>
            <a href="door.html" class="btn">Подробнее</a>
          </div>
          <div class="col-3 col-lg-6 col-sm-12 product">
            <img src="img/сatalog/test.jpg" alt="Название" />
            <h3>Название</h3>
            <div>20000 &#8381;</div>
            <a href="door.html" class="btn">Подробнее</a>
          </div>
          <div class="col-3 col-lg-6 col-sm-12 product">
            <img src="img/сatalog/test.jpg" alt="Название" />
            <h3>Название</h3>
            <div>20000 &#8381;</div>
            <a href="door.html" class="btn">Подробнее</a>
          </div>
          <div class="col-3 col-lg-6 col-sm-12 product">
            <img src="img/сatalog/test.jpg" alt="Название" />
            <h3>Название</h3>
            <div>20000 &#8381;</div>
            <a href="door.html" class="btn">Подробнее</a>
          </div>
          <div class="col-3 col-lg-6 col-sm-12 product">
            <img src="img/сatalog/test.jpg" alt="Название" />
            <h3>Название</h3>
            <div>20000 &#8381;</div>
            <a href="door.html" class="btn">Подробнее</a>
          </div>
        </div>
        <div class="row">
          <div class="col-12 text-center">
            <a href="catalog.html" class="btn">Перейти в каталог</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Форма обратной связи -->
    <div class="contacts" style="background-image: url(img/bg-contacts.png)">
      <div class="container">
        <div class="row">
          <div class="col-4 col-lg-12 contacts-item">
            <h3>Закажите звонок специалиста</h3>
            <p>
              Вы можете заказать звонок нашего специалиста в удобное для Вас
              время.
            </p>
            <form action="">
              <input type="text" placeholder="Имя" />
              <input type="text" placeholder="Телефон" />
              <input type="text" placeholder="Когда позвонить?" />
              <button class="btn">Заказать звонок</button>
            </form>
          </div>
          <div class="col-4 col-lg-6 col-sm-12 text-center contacts-item">
            <img src="img/icons/tag 2.png" alt="Подробно" />
            <h3>Подробно</h3>
            <p>Наши специалисты помогут Вам в выборе нужной обуви.</p>
          </div>
          <div class="col-4 col-lg-6 col-sm-12 text-center contacts-item">
            <img src="img/icons/clock.png" alt="Быстро" />
            <h3>Быстро</h3>
            <p>Мы стараемся максимально быстро ответить на Ваш запрос.</p>
          </div>
        </div>
      </div>
    </div>
    <!-- Футер -->
    <div class="footer">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <a href="policy.html">Политика конфиденциальности</a>
            <span class="accent-color">&copy; </span> Vibe Style, 2023
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
